<template>
  <div class="inserblog">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>博客管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加博客</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 白板 -->
    <div class="insertblog_main">
      <el-card class="blog-box">
        <el-form ref="blog" :model="blog" :rules="blogRule" label-width="80px">
          <el-row>
            <el-col :span="10">
              <el-form-item label="标题" prop="title">
                <el-input v-model="blog.title" name="title"></el-input>
              </el-form-item>
              <el-form-item label="博客简介" prop="intro">
                <el-input type="textarea" v-model="blog.intro"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="2">
              <el-upload
                ref="upload"
                action="http://127.0.0.1:8090/image"
                list-type="picture-card"
                :limit="1"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-success="handleSuccess">
                <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="blog.imageUrl" alt="">
                </el-dialog>
            </el-col>
          </el-row>
          <el-form-item label="类别">
            <el-select
              v-model="blog.sid"
              placeholder="请选择博客类别"
            >
              <el-option
                v-for="(sort, index) in sorts"
                :key="index"
                :label="sort.name"
                :value="sort.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签">
            <el-checkbox-group v-model="blog.labels">
              <el-checkbox
                v-for="(label, index) in labels"
                :key="index"
                :label="label.name"
              ></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="博客内容" prop="content">
            <el-input type="textarea" v-model="blog.content"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('blog')">立即创建</el-button>
            <el-button @click="onReset()">取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      blog: {
        uid: window.sessionStorage.getItem("token"),
        sid: 1,
        title: "",
        imageUrl: "",
        labels:[],
        content: "",
        intro: "",
      },
      sorts: [],
      labels: [],
      dialogVisible:false,
      blogRule:{
        title: [
          { required: true, message: "请输入文章标题", trigger: "blur" },
        ],
        intro: [
          { required: true, message: "请输入文章简介", trigger: "blur" },
        ],
         content: [
          { required: true, message: "请输入文章内容", trigger: "blur" },
        ],
      }
    };
  },
  methods: {
    async getAllSorts() {
      var d = await this.$http.get("sorts");
      this.sorts = d.data.sorts;
    },
    async getAllLabels() {
      var d = await this.$http.get("labels");
      this.labels = d.data.labels;
    },
    handleRemove(file) {
      this.$http.delete("image",{
        params:{
          realPath:file.response.data.realPath,
        }
      });
      this.$message({
        type:"success",
        message: "图片删除成功"
      });
    },
    handlePictureCardPreview(file) {
      this.dialogVisible = true;
    },
    handleSuccess(response){
      this.blog.imageUrl="http://127.0.0.1:8090/"+response.data.imageUrl;
    },
    onReset(){
      this.$refs['blog'].resetFields();
      this.$refs['upload'].clearFiles();
    },
    onSubmit(formName) {
      this.$refs[formName].validate(async valid=>{
        if(valid){
         var d=await this.$http.post('blog',this.blog);
         if(d.code==200){
           this.$message({
             type:"success",
             message:d.message
           });
           this.onReset()
         }
        }
      })
      
    },
  },
  mounted: function () {
    this.getAllSorts();
    this.getAllLabels();
  },
};
</script>
<style scoped>
.insertblog_main {
  width: 80%;
  margin: 0 auto;
}
</style>
